<template>
    <v-row class="d-flex mb-3">
        <v-col cols="12">
            <v-label class="font-weight-bold mb-1">用户名</v-label>
            <v-text-field variant="outlined" density="compact" hide-details color="primary"
                v-model="username"></v-text-field>
        </v-col>
        <v-col cols="12">
            <v-label class="font-weight-bold mb-1">密码</v-label>
            <v-text-field variant="outlined" density="compact" type="password" hide-details color="primary"
                v-model="password"></v-text-field>
        </v-col>
        <v-col cols="12" class="pt-0">

        </v-col>
        <v-col cols="12" class="pt-0">
            <v-btn color="primary" size="large" block flat @click="signIn">Sign in</v-btn>
        </v-col>
    </v-row>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const username = ref('')
const password = ref('')
const { login,isLoggedIn } = useAuth()
const signIn = async () => {
    // if(username.value=='123' && password.value=='123'){
    //     showSuccessToast('登录成功！');
    //     localStorage.setItem('login','true')
    //     navigateTo('/')
    // }
    const data = await $fetch('/api/auth', {
        method: "POST",
        body: JSON.stringify({ 'username': username.value, 'password': password.value }),
    })
    if (data.success) {
        showSuccessToast(data.mes);
        login()
        navigateTo('/')
    } else {
        showFailToast(data.mes)
    }
    console.log(isLoggedIn)
} 
</script>
